<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 100px;
				margin: 5px;
			}

			.d1 {
				background-color: red;
			}

			.d2 {
				background-color: yellow;
			}

			.d3 {
				background-color: blue;
			}

			.d4 {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="d1">博为峰</div>
		<!-- <div class="d2"><a href="https://www.atstudy.com">学掌门</a></div> -->
		<div class="d2">学掌门</div>
		<div class="d3">开发培训</div>
		<div class="d4">测试培训</div>
		<button id="add">增</button>
		<button id="del">删</button>
		<button id="update">改</button>
		<script type="text/javascript">
			//-----------------------------增--------------------------------------------
			//根据ID选择器获取DOM对象
			var addBtn = document.querySelector("#add");
			addBtn.addEventListener('click', function() {
				//创建DOM对象,参数:标签名称
				var a = document.createElement("a");
				a.href = "https://www.atstudy.com";
				a.target = "_blank";
				a.innerText = "学掌门";
				//获取DIV节点对象
				var d2 = document.querySelector(".d2");
				//王div节点对象中追加a节点对象
				d2.appendChild(a);
			})
			//-----------------------------删--------------------------------------------
			//根据ID选择器获取DOM对象
			var delBtn = document.querySelector("#del");
			delBtn.addEventListener('click', function() {
				//获取DIV节点对象
				var d4 = document.querySelector(".d4");
				//父节点对象body
				var body = document.body;
				//从父中删子
				body.removeChild(d4);
			})

			//-----------------------------改--------------------------------------------
			//根据ID选择器获取DOM对象
			var upBtn = document.querySelector("#update");
			upBtn.addEventListener('click', function() {
				//获取DIV4节点对象
				var d4 = document.querySelector(".d4");
				//获取DIV3节点对象
				var d3 = document.querySelector(".d3");
				//克隆false 
				//Default. Cloned objects do not include childNodes. 
				//true Cloned objects include childNodes. 
				var d33 = d3.cloneNode(true);
				//父节点对象body
				var body = document.body;
				//参数1:新的 参数2:被替换的
				//用d3把d4替换
				// replaceChild(oNewNode, oChildNode)
				body.replaceChild(d33, d4);

			})
		</script>
	</body>
</html>
